<template>
  <div class="detail" ref="detail" @scroll="getScroll">
    <!-- 头部导航栏 -->
    <TopTab @active="Ftop" :scrollTop='scrollTop'></TopTab>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        :show-indicators="isindicators"
        @change="change"
      >
        <van-swipe-item v-for="(item, index) in ImgList" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="index">
        <div class="left">{{ indexs }}</div>
        <span>/</span>
        <div class="right">{{ ImgList.length }}</div>
      </div>
    </div>
    <h2 class="pic">￥：{{ res.pic }}</h2>
    <h3 class="detail-content">{{ res.miaoshu }}</h3>
    <div class="detailC">
      <div class="detail-rePrd">
        <p :class="isShow === 1 ? 'overflow' : ''">
          {{ res.rePrd }}<span>查看</span>
        </p>
        <i
          class="iconfont icon-xiangxia"
          style="font-size: 20px"
          @click="show"
          v-if="isShow === 1"
        ></i>
        <i
          class="iconfont icon-icon_on_the_top"
          style="font-size: 20px"
          @click="showUp"
          v-if="isShow === 2"
        ></i>
      </div>
    </div>

    <!-- 款式弹出层 -->
    <PopUP :PopDate="PopDate" :showP="showP" @getF="getC" :obj="obj"></PopUP>
    <div class="SelectSize" @click="showPop">
      <p>已选款式:</p>
      <!-- 动态选择的数据 -->
      <div class="top-Content" style="color: red">
        <span>{{ obj.color }},</span>
        <span>{{ obj.size }}码,</span>
        <span>{{ obj.num }}双</span>
      </div>
      <p>···</p>
    </div>
    <div class="other">
      <h2>
        这是评论
        <p>好穿，不臭脚，不打脚</p>
      </h2>
      <h2>
        这是详情
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque ipsam
          debitis mollitia? Molestiae repudiandae dolorem magni cupiditate
          dolores a illo et, nam perferendis vero voluptatum atque quod saepe
          eveniet assumenda!
        </p>
      </h2>
      <h2 style="height: 1000px">
        这是推荐
        <p>学IT，来千锋教育</p>
      </h2>
    </div>

    <!-- 底部商品导航栏 -->
    <shopNav ></shopNav>
  </div>
</template>

<script>
import TopTab from "@/heightComponent/Top/TopTab.vue";
import PopUP from "@/heightComponent/Pop/PopUp.vue";
import shopNav from "@/components/shopNav.vue";
import { detail } from "@/http/api/Detail.js";

import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      isindicators: false, //不显示指示器
      ImgList: [], //图片数据
      indexs: 1, //图片数量
      res: {}, //返回总数据
      isShow: 1, //溢出显示省略号,1显示 2.不显示
      PopDate: {},
      showP: false, //显示弹出层
      SelectList: this.$store.state.SelectList, //选择的款式
      obj: this.$store.state.proSelectObj, //自己默认的数据
      scrollTop:0,//滚动距离
    };
  },
  components: {
    TopTab,
    PopUP,
    shopNav,
  },
  watch: {
    "$store.state.footIndex": function(newVal, oldVal){
      //注意
      this.indexs= newVal
    },
    "$route":function(newVal,oldVal){
      console.log(newVal,oldVal);
      this.path= newVal.path
    }
  },
  created() {
    this.getDetail(this.$route.query.id);
    // this.T();
  },
  methods: {
    T() {
        
    },
    getDetail(id) {
      //获取数据
      detail("/prdDetail", { id }).then((res) => {
        this.res = res;
        this.ImgList = res.ProList;
        this.PopDate = this.res;
        // this.showP = res.PopDate.iscollect;
        let obj = this.$store.state.proSelectObj;
        obj.img = this.res.ProList[0];
        obj.pic = this.res.pic
        obj.shop = this.res.shop
        obj.name = this.res.name
        // obj.select = true
        //触发mutations 中的方法 ,添加图片,价格，店铺名,商品名
        this.$store.commit("changeProSelectObj",obj);
      });
    },
    change(index) {
      //显示当前图片数
      this.indexs = index + 1;
    },
    show() {
      //展开
      this.isShow = 2;

    },
    showUp() {
      //收起
      this.isShow = 1;
    },
    showPop() {
      //显示弹出层
      this.showP = true;
    },
    getC(value) {
      //子组件传值。通知父组件关闭弹出层
      this.showP = value;
    },

    getScroll() { //获取滚动距离
        this.scrollTop= this.$refs.detail.scrollTop
    },
    Ftop(value) {
      //点击选项卡，修改距离顶部的距离
      this.$refs.detail.scrollTop = value;
    },
    
  },
};
</script>

<style scoped lang='scss'>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 1500px;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 1500px;
  }
}
.detail {
  overflow-y: auto;
  position: relative;
}
.index {
  width: 300px;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  position: absolute;
  right: -50px;
  top: 1300px;
  border-radius: 50px;
  .left {
    margin-left: 50px;
  }
}
.pic {
  color: red;
}
.detail-rePrd {
  display: flex;
  align-items: center;
  p {
    font-size: 14px;
  }
  span {
    font-size: 14px;
    color: red;
    text-decoration: underline;
  }
  .icon-xiangxia {
    width: 150px;
  }
}
.SelectSize {
  margin-top: 100px;
  display: flex;
  align-items: center;
  height: 200px;
  background: rgba(204, 204, 204, 0.3);
  border-radius: 50px;
}

.overflow {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.other {
  h2 {
    width: 100%;
    height: 1500px;
    background: pink;
  }
}
</style>